<template>
	<view class="page_wrap">
		<custom-header title="配货" :back="false" sticky />
		<!-- 质检员/打包员 -->
		<block v-if="role?.roleId == 1 || role?.roleId == 2">
			<!-- 查询条件区域 -->
			<view class="query-section">
				<view class="query-row">
					<view class="time-selector" @click="showTimePicker">
						<text class="time-text">{{ selectedDate }}</text>
						<text class="time-arrow">▼</text>
					</view>
					<view class="time-selector" @click="showSelectPlatform">
						<text class="time-text">{{ platformName }}</text>
						<text class="time-arrow">▼</text>
					</view>
					<view class="area-selector" @click="triggerSearchType">
						<text class="area-text">{{ searchTypeName }}</text>
						<image class="area-arrow" src="/static/home/refresh.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 数据类型 -->
			<view class="dataType_wrap">
				<view 
					class="type_list" 
					:class="{active:item.id == dataType}"
					v-for="(item,index) in dataTypeList"
					:key="index"
					@click="selectDataType(item.id)">
					 {{ item.name }}
				</view>
			</view>
		</block>
		
		<!-- 发货员 -->
		<block v-if="role?.roleId == 3">
			<!-- Tab切换 -->
			<view class="tab-bar">
				<view 
					class="tab-item" 
					:class="{ active: activeTabIndex == index }" 
					@click="switchTab(index)"
					v-for="(item,index) in tabList"
					:key="index">
						<image v-if="activeTabIndex == index" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
						<text class="tab-text">{{ item }}</text>
				</view>
			</view>
			<!-- 数据类型 -->
			<view class="dataType_wrap">
				<view class="platform_name" @click="isShowLogistics = true">
					{{ logistics || '按物流'}} 
					<up-icon name="arrow-down" size="24rpx" color="#333333"></up-icon>
				</view>
				<view class="platform_name" @click="showTimePicker">
					{{selectedDate || '按时间'}} 
					<up-icon name="arrow-down" size="24rpx" color="#333333"></up-icon>
				</view>
			</view>
		</block>
		
		
		
		<!-- 列表数据 -->
		<view class="_wrap">
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<view class="list_wrap" v-else-if="listData.length">
				<view class="list" v-for="(item,index) in listData" :key="index" @click="handleDetail(item)">
					<view class="name">{{ item.name }}</view>
					<view class="progress_bar">
						<view class="progress" :class="`${item.progress>= 100?'success':'padding'}`" :style="`width:${item.progress}%`"></view>
					</view>
				</view>
			</view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>
		
		<view class="footer_btn_wrap fixed" v-if="role?.roleId != 3">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="handleScan">扫码</button>
			</view>
		</view>
		
		
		<!-- 时间选择器组件 -->
		<custom-select-time 
			:show="showTimeSelector" 
			:defaultDate="selectedDate" 
			@confirm="handleTimeConfirm"
			@close="showTimeSelector = false" />
		
		<!-- 选择平台 -->
		<up-popup :show="isShowPopup" mode="bottom" round="10" @close="isShowPopup = false" :safeAreaInsetBottom="true">
			<view class="platform_popup">
				<view class="picker-type">
					<view class="list" :class="{'active':index == platformTypeIndex}" v-for="(item,index) in platformTypeList" :key="index"
						@click="handleSelectType(index)">
						{{ item }}
					</view>
				</view>
				<picker-view :value="pickerValue" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in platformList" :key="index">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="picker-header">
					<view class="cancel btn" @click="isShowPopup = false">取消</view>
					<view class="confirm btn" @click="confirmSelection">确认</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 选择物流 -->
		<custom-select
			:show="isShowLogistics" 
			:datas="logisticsList"
			keyName="name"
			type="2"
			@confirm="handleLogisticsConfirm"
			@close="isShowLogistics = false"/>
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
	
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	import { getCurrentDate,objectToQueryString } from '@/utils/util.js'
	import { useStore } from 'vuex'
	const store = useStore()
	
	// 获取角色
	const role = computed(()=>store.getters.role)
	
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		hideToast()
	}
	
	// 搜索类型
	const searchTypeName = ref('普通货架')
	const triggerSearchType = ()=>{
		searchTypeName.value = searchTypeName.value == '普通货架'?'城市货架':'普通货架'
		loadGetListData()
	}
	// 选择时间
	const showTimeSelector = ref(false)
	const selectedDate = ref('')
	const showTimePicker = () => {
		showTimeSelector.value = true
	}	
	const handleTimeConfirm = (date) => {
		selectedDate.value = date
		loadGetListData()
	}
	
	// 选择数据类型
	const dataType = ref(null)
	const dataTypeList = computed(()=>{
		console.log(role.value?.roleId)
		// 质检员
		if(role.value?.roleId == 1){
			console.log(111)
			return [
				{ id:1,name:'可配货' },
				{ id:2,name:'配货完成' }
			]
		}
		// 打包员
		else{
			return [
				{ id:1,name:'未打包' },
				{ id:2,name:'已打包' },
				{ id:3,name:'自提货位' }
			]
		}
	})
	const selectDataType = (value)=>{
		if(dataType.value == value){
			dataType.value = null
		}else{
			dataType.value = value
		}
		loadGetListData()
	}
	/** 选择平台  start */
	const pickerValue = ref(0)
	const bindChange = (e)=>{
		pickerValue.value = e.detail.value
	}
	const platformTypeList = ['按平台','按分区']
	const platformTypeIndex = ref(0)
	const handleSelectType = (index)=>{
		platformTypeIndex.value = index
		// 按平台
		if(index == 0){
			platformList.value = [
				'全部',
				'其他平台1',
				'其他平台2', 
				'其他平台3',
				'亚拍花卉',
				'其他平台4',
				'其他平台5',
				'其他平台6'
			]
		}
		// 按分区
		else{
			platformList.value = [
				'全部',
				'四区',
				'三区',
				'二区',
				'一区',
				'五区',
				'六区',
				'七区'
			]
		}
	}
	const platformName = ref('全部')
	const platformList = ref([
		'全部',
		'其他平台1',
		'其他平台2', 
		'其他平台3',
		'亚拍花卉',
		'其他平台4',
		'其他平台5',
		'其他平台6'
	])
	const isShowPopup = ref(false)
	// 打开选择
	const showSelectPlatform = ()=>{
		platformTypeIndex.value = 0
		isShowPopup.value = true
	}
	// 确认选择
	const confirmSelection = ()=>{
		console.log(pickerValue.value)
		platformName.value = platformList.value[pickerValue.value]
		isShowPopup.value = false
		loadGetListData()
	}
	/** 选择平台  end */
	
	
	/** 发货员 start  */
	
	// 当前激活的Tab
	const activeTabIndex = ref(0)
	// Tab列表
	const tabList = ['全部', '待发货', '已发货', '城市仓', '自提货位']
	// 切换Tab
	const switchTab = (index) => {
		activeTabIndex.value = index
		loadGetListData()
	}
	// 选择物流
	const isShowLogistics = ref(false)
	const logistics = ref('')
	const logisticsList = ref([
		{
			id:1,
			name:'全部',
			children:[
				{
					id:11,
					parentId:1,
					name:'全部',
				}
			]
		},
		{
			id:2,
			name:'空运',
			children:[
				{
					id:21,
					parentId:2,
					name:'锦亚海航空11',
				},
				{
					id:13,
					parentId:2,
					name:'博强空运22',
				}
			]
		},
		{
			id:3,
			name:'冷链',
			children:[
				{
					id:31,
					parentId:3,
					name:'昱泰冷链',
				},
				{
					id:32,
					parentId:3,
					name:'博强冷链',
				}
			]
		},
		{
			id:4,
			name:'物流',
			children:[
				{
					id:41,
					parentId:4,
					name:'xxx物流11',
				},
				{
					id:42,
					parentId:4,
					name:'xxx物流66',
				}
			]
		}
	])
	const handleLogisticsConfirm = (data)=>{
		console.log(data)
		logistics.value = data.name
	}
	/** 发货员 end  */
	
	// 扫码
	const handleScan = ()=>{}
	
	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(() => {
			listLoading.value = 'loadmore'
			listData.value = [
				{name:'28-213号',progress:20,},
				{name:'29-233号',progress:4,},
				{name:'28-223号',progress:60,},
				{name:'25-223号',progress:40,},
				{name:'28-83号',progress:70,},
				{name:'26-223号',progress:50,},
				{name:'28-263号',progress:66,},
				{name:'28-223号',progress:100,},
				{name:'30-283号',progress:100,},
				{name:'28-223号',progress:50,},
				{name:'65-223号',progress:50,},
				{name:'28-223号',progress:50,},
				{name:'77-223号',progress:80,}
			]
		}, 1000)
	}
	// 详情（配货、打包、发货操作）
	const handleDetail = (item)=>{
		// 质检员
		if(role.value?.roleId == 1){
			uni.navigateTo({
				url:`/pages/distributionDetail/distributionDetail?${objectToQueryString({...item})}`
			})
		}
		// 打包员
		else if(role.value?.roleId == 2){
			uni.navigateTo({
				url:`/pages/package/package?${objectToQueryString({...item})}`
			})
		}
		// 发货员
		else if(role.value?.roleId == 3){
			uni.navigateTo({
				url:`/pages/shipments/shipments?${objectToQueryString({...item})}`
			})
		}
		
	}
	
	
	
	onMounted(()=>{
		selectedDate.value = getCurrentDate()
		loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap {
		padding-bottom: 140rpx; // 为底部固定按钮留出空间
	}
	// 查询条件区域
	.query-section {
		padding: 0 24rpx;
		border-radius: 20rpx;
		height: 114rpx;
		line-height: 114rpx;
		background-color: #fff;
	
		.query-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			padding:0 30rpx;
		}
	
		.search-box {
			flex: 1;
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 32rpx;
			padding: 0 30rpx;
			height: 64rpx;
			min-width: 0;
	
			.area-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				// cursor: pointer;
	
				.area-text {
					font-size: 24rpx;
					color: #555;
				}
	
				.area-arrow {
					// font-size: 20rpx;
					// color: #555;
					width: 20rpx;
					height: 20rpx;
					transform: translateY(-1rpx);
				}
			}
	
			.divider {
				width: 1px;
				height: 32rpx;
				background: #e5e5e5;
				margin: 0 18rpx;
			}
	
			.search-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
				display: block;
				transform: translateY(-1rpx);
			}
	
			.search-input {
				flex: 1;
				font-size: 24rpx;
				color: #555;
				background: transparent;
				border: none;
				outline: none;
				min-width: 0;
	
				&::placeholder {
					color: #999999;
				}
			}
		}
	
		.area-selector {
			display: flex;
			align-items: center;
			gap: 8rpx;
			flex-shrink: 0;
			// cursor: pointer;
			
			.area-text {
				font-size: 24rpx;
				color: #555;
			}
			
			.area-arrow {
				// font-size: 20rpx;
				// color: #555;
				width: 20rpx;
				height: 20rpx;
				transform: translateY(-1rpx);
			}
		}
		.time-selector {
			display: flex;
			align-items: center;
			gap: 8rpx;
			flex-shrink: 0;
			cursor: pointer;
	
			.time-text {
				font-size: 24rpx;
				color: #555;
			}
	
			.time-arrow {
				font-size: 20rpx;
				color: #555;
			}
		}
	}
	.dataType_wrap{
		display: flex;
		margin: 24rpx;
		gap: 24rpx;
		.platform_name,.type_list{
			flex: 1;
			background-color: #fff;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12rpx;
			border-radius: 16rpx;
			border:1px solid #fff;
			font-size: 24rpx;
			color: #333;
			gap: 8rpx;
			&.active{
				background-color: #FCEEF0;
				border:1px solid #F5564D;
				color: #F5564D;
			}
		}
	}
	.platform_popup{
		.picker-header {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 60rpx;
		
			.btn {
				width: 240rpx;
				line-height: 72rpx;
				font-size: 32rpx;
				width: 180rpx;
				text-align: center;
				border-radius: 120rpx;
			}
		
			.cancel {
				background: #FFF0F0;
				color: #F5564D;
			}
		
			.confirm {
				color: #FFF;
				background: #F5564D;
			}
		}
		
		.picker-view {
			width: 750rpx;
			height: 400rpx;
			margin-top: 20rpx;
			text-align: center;
		}
		
		.picker-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			font-size: 34rpx;
			color: #333;
			text-align: center;
		}
		
		.picker-type {
			display: flex;
			padding: 40rpx 128rpx;
			justify-content: space-between;
			border-bottom: 1px solid #EAEAEA;
		
			.list {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 67rpx;
				background: #F2F5F9;
				color: #333;
				box-sizing: border-box;
				border: 1rpx solid #F2F5F9;
				font-size: 24rpx;
		
				&.active {
					background: var(--theme-selected);
					color: #F5564D;
					border: 1rpx solid #F5564D
				}
			}
		}
	}
	._wrap{
		padding: 0 24rpx;
	}
	.no_data{
		padding-top: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	.list_wrap{
		display: flex;
		flex-wrap:wrap;
		gap: 12rpx;
		.list{
			width: 226rpx;
			height: 127rpx;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: 36rpx;
			color: #666;
			font-weight: bold;
			&:active {
				background-color: #f1f1f1;
			}
			.progress_bar{
				width: 194rpx;
				height: 6rpx;
				background: #F0F0F0;
				border-radius: 48rpx;
				position: absolute;
				bottom: 10rpx;
				margin: 0 auto;
				.progress{
					width: 20%;
					height: 100%;
					border-radius: 48rpx;
					&.padding{
						background: #4298FF;
					}
					&.success{
						background: #00BAAD;
					}
				}
			}
		}
	}
	
	// 发货员
	// Tab栏
	.tab-bar {
		background: #f5f5f5;
		display: flex;
		.tab-item {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
	
			.tab-icon {
				width: 27.5rpx;
				height: 25rpx;
				transform: translateX(10rpx) translateY(-16rpx);
			}
	
			.tab-text {
				font-size: 28rpx;
				color: #999;
			}
	
			.tab-indicator {
				position: absolute;
				bottom: 0;
				width: 60rpx;
				height: 4rpx;
				background: #f5564d;
				border-radius: 2rpx;
			}
	
			&.active .tab-text {
				color: #333;
				font-weight: 600;
			}
		}
	}
</style>